<template>
	<view class="citySelect">
		<view class="close">
			<uv-icon name="close" color="#919191" size="36rpx" bold @click="close" />
		</view>
		<view class="box">
			<!-- <uv-tabs :list="tabsList" @click="tabsClick" :current="current" lineColor="#B05042" />
			 -->
			<tui-tabs :tabs="tabsList" :currentTab="current" @change="tabsClick" sliderBgColor="red" selectedColor="red"></tui-tabs>
			<view class="list-box">
			<uv-list class="list" v-if="loading">
				<uv-list-item v-for="(e, i) in newList" :key="e.id">
					<view :class="['title', isSelech(e.id)]" @click="selechClick(e, i)">{{ e.title }}</view>
				</uv-list-item>
				<view class="" v-if="newList.length === 0" style="margin-top: 200rpx;">
					<uv-empty mode="address" text="暂无数据" />
				</view>
			</uv-list>
			<view v-else class="loading">
				<uv-loading-icon text="加载中" vertical />
			</view>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref, computed, nextTick,watch } from 'vue'
import { getRegionsByType } from '@/api'

const props = defineProps({
	init: {
		type: Array,
		default: []
	},
	level: {
		type: Number,
		default: 3
	}
	
	
})
const emit = defineEmits(['select'])

const list = ref([])
const current = ref(0)
const tabsList = ref([])
const loading = ref(false)

watch(() => props.level, (val) => {
  console.log('props.level changed:', val)
  init()
})

/**
 * 计算当前要显示的数据
 */
const newList = computed(() => {
	if (!list.value || list.value.length === 0) return []
	if (current.value === props.level) return []
	if (current.value === 0) return list.value

	let currentData = list.value
	for (let i = 0; i < current.value; i++) {
		const selectedIndex = tabsList.value[i]?.i
		console.log(
			`第 ${i} 级 selectedIndex=`, selectedIndex,
			'currentData=', currentData,
			'tabsList=', JSON.stringify(tabsList.value)
		)

		if (selectedIndex === undefined) return []
		currentData = currentData[selectedIndex]?.child || []
	}
	console.log('最终 newList=', currentData)
	return currentData
})

/**
 * 判断是否选中
 */
const isSelech = (id) => {
	const curTab = tabsList.value[current.value]
	if (!curTab) return ''
	return id === curTab.id ? 'active' : ''
}

/**
 * tab 点击
 */
const tabsClick = (e) => {
	if (e.disabled) return
	current.value = e.index
}

/**
 * 选择城市
 */
const selechClick = (e, i) => {
	const cur = current.value

	// 重置后续选项
	for (let index = 0; index < props.level; index++) {
		if (index >= cur) {
			tabsList.value[index] = {
				id: -1,
				i: 0,
				name: '请选择',
				disabled: true
			}
		}
	}

	// 更新当前 tab —— 用 splice 替换，保证小程序响应式
	const newTab = {
		...tabsList.value[cur],
		i,
		id: e.id,
		name: e.title,
		disabled: false
	}
	tabsList.value.splice(cur, 1, newTab)

	// 进入下一层或关闭
	if (cur < props.level - 1) {
		current.value++
	} else if (cur === props.level - 1 && newTab.id > -1) {
		close()
	}
}

/**
 * 关闭/回传数据
 */
const close = () => {
	if (!loading.value) return
	const index = tabsList.value.findIndex(e => e.id === -1)
	const data = tabsList.value.map(e => ({
		id: e.id,
		name: e.name,
		index: e.i
	}))
	emit('select', index === -1 ? data : false)
}

/**
 * 初始化选择
 */
const initProcessing = async () => {
	for (let i = 0; i < props.init.length; i++) {
		const id = props.init[i]
		const index = newList.value.findIndex((e => e.id == id))
		if (index === -1) break
		tabsList.value[i] = {
			...tabsList.value[i],
			i: index,
			id: newList.value[index].id,
			name: newList.value[index].title,
			disabled: false
		}
		if (i < props.init.length - 1) current.value++
	}
}

/**
 * 初始化
 */
const init = async () => {
	tabsList.value = Array.from({ length: props.level }, () => ({
		id: -1,
		i: 0,
		name: '请选择',
		disabled: true
	}))
	tabsList.value[0].disabled = false

	const { result } = await getRegionsByType({ type: props.level })
	
	list.value = result
	await nextTick()

	if (props.init.length > 0) await initProcessing()
	loading.value = true
}

init()
</script>


<style lang="scss" scoped>
	.citySelect {
		height: 100%;
		display: flex;
		overflow: hidden;
		flex-direction: column;

		.close {
			display: flex;
			padding-right: 30rpx;
			justify-content: flex-end;
		}
	}
	
	.list-box{
		padding: 30upx;
		box-sizing: border-box;
		width: 100%;
		font-size: 28upx;
		
	}

	.box {
		flex: 1;
		display: flex;
		overflow: hidden;
		flex-direction: column;

		.list {
			flex: 1;
			overflow: auto;
			

			.title {
				color: #333;
				font-size: 28rpx;
				padding: 0.625rem 0.9375rem;
			}

			.active {
				color: #C74A3C;
			}
		}
	}

	.loading {
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>